<!--
 * @Author: qianduanxuyaochendian lxy_01@outlook.com
 * @Date: 2022-05-14 17:20:14
 * @LastEditors: qianduanxuyaochendian lxy_01@outlook.com
 * @LastEditTime: 2022-05-19 17:05:55
 * @FilePath: \job\web\src\views\personal\Index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="personal-container">
    <div class="header">
      <n-gradient-text :size="30" type="success"> 个人资料修改</n-gradient-text>
    </div>
    <div class="container">
      <div class="top">
        <n-image width="100" :src="formVal.avatar" />
      </div>
      <div class="middle">
        <n-form ref="formRef" :model="formVal" :rules="rules" :size="size" label-placement="left" label-width="auto">
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="12" path="loginname" label="用户名">
              <n-input v-model:value="formVal.loginname" placeholder="学号、工号 | 邮箱 " />
            </n-form-item-gi>
            <n-form-item-gi :span="12" path="password" label="密码 ">
              <n-input v-model:value="formVal.password" placeholder="请输入密码" type="password"
                show-password-on="mousedown" />
            </n-form-item-gi>
            <n-form-item-gi :span="12" path="realname" label="真实姓名">
              <n-input v-model:value="formVal.realname" placeholder="请输入真实姓名" />
            </n-form-item-gi>
            <n-form-item-gi :span="12" path="phone" label="联系方式">
              <n-input v-model:value="formVal.phone" placeholder="请输入联系方式" />
            </n-form-item-gi>
            <n-form-item-gi :span="12" path="email" label="邮箱">
              <n-auto-complete v-model:value="formVal.email" :input-props="{
                autocomplete: 'disabled',
              }" :options="options" placeholder="邮箱" />
            </n-form-item-gi>
            <n-form-item-gi :span="12" label="性别" path="sexList">
              <n-select v-model:value="formVal.sex" placeholder="请选择用户性别" :options="sexOptions" />
            </n-form-item-gi>
            <n-form-item-gi :span="6"> 
              <!-- 占位 -->
            </n-form-item-gi>
            <n-form-item-gi :span="6"> 
              <!-- 占位 -->
            </n-form-item-gi>
            <n-form-item-gi :span="6">
              <n-button type="primary" @click="handleEdit" block round>修改</n-button>
            </n-form-item-gi>

            <n-form-item-gi :span="6">
              <n-button block round @click="handleBack">返回</n-button>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </div>
    </div>
  </div>
</template>

<script>
import { UserInfoAPI } from "../../http/api/login.js"
// 引入reactive用于定义响应式变量
// import { ref, reactive, computed, onMounted, toRaw, onBeforeMount } from "vue"
// 导入路由
// import { useRouter } from "vue-router"
// const router = useRouter()
// const size = ref("large")
// const valueRef = ref("")
// 登录框表单数据
export default {
  data() {
    return {
      size: "large",
      valueRef: "",
      formVal: {},
      sexList: [
        { label: "保密", value: 0 },
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ],
      rules: {
        loginname: {
          required: true,
          trigger: "blur",
          message: "学号、工号 | 邮箱",
        },
        password: {
          required: true,
          trigger: "blur",
          message: "请输入密码",
        },
        realname: {
          required: true,
          trigger: "blur",
          message: "请输入真实姓名",
        },
        phone: {
          required: true,
          trigger: "blur",
          message: "请输入手机号",
        },
        email: {
          required: true,
          trigger: "blur",
          message: "请输入邮箱",
        },
        sex: {
          required: true,
          trigger: "blur",
          message: "请选择性别",
        },
      },
    }
  },
  methods: {
    handleEdit() {
      this.$store.commit('user/SET_PERSONALMODAL', false)
      // window.$message.success("修改成功")
    },
    handleBack() {
      console.log(this.$store);
      this.$store.commit('user/SET_PERSONALMODAL', false)
    },
    //获取用户信息
    getUserInfo() {
      UserInfoAPI()
        .then((res) => {
          this.formVal = res.result.userInfo
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  computed: {
    options() {
      return [
        "@gmail.com",
        "@163.com",
        "@qq.com",
        "@hotmail.com",
        "@outlook.com",
      ].map((suffix) => {
        const prefix = this.valueRef.split("@")[0]
        return {
          label: prefix + suffix,
          value: prefix + suffix,
        }
      })
    },
    roleOptions() {
      return this.roleList.map((v) => ({
        label: v.label,
        value: v.value,
      }))
    },
    sexOptions() {
      return this.sexList.map((v) => ({
        label: v.label,
        value: v.value,
      }))
    },
  },
  mounted() {
    this.getUserInfo()
  },
}
</script>

<style lang="scss">
.personal-container {
  display: flex;
  justify-content: center;
  flex-direction: column;

  .container {
    width: 100%;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 10px;

    .top {
      .n-image {
        border-radius: 10px;
      }

      margin-left: 30px;
      width: 100%;
      display: flex;
      justify-content:center;
      gap: 20px;
    }

    .middle {
      margin-top: 20px;
    }
  }
}
</style>
